import React, { Component } from 'react';
import './HCcustomerEvaluation.css'
import { Flex } from 'antd-mobile';
import titleImg from '../../img/title.png'
import HCxx from '../HCxx/HCxx'
import { ImagePicker, WingBlank } from 'antd-mobile';
import { List, TextareaItem } from 'antd-mobile';
import * as api from '../../uitls/api'
class HCcustomerEvaluation extends Component {
    // eslint-disable-next-line no-useless-constructor
    constructor() {
        super()
        this.state = ({
            order_id: '',
            shop_name: '',
            shop_photo_url: '',
            // 口味
            taste_score: '',
            // 包装
            package_score: '',
            // 总体评分
            account_score: '',
            // 评价
            evaluate: '',
            files: []
        })
    }
    fu1 = (msg) => {
        this.setState({
            taste_score: msg
        })
    }
    fu2 = (msg) => {
        this.setState({
            package_score: msg
        })

    }
    fu3 = (msg) => {
        this.setState({
            account_score: msg
        })
    }
    onChange = (files, type, index) => {
        console.log(files);
        // console.log(files[0].file);
        this.setState({
            files,
        });
        // console.log(this.state.files[0].url);
    }
    tijiao = () => {
        console.log(this.state);
        if (this.state.files.length === 0) {
            this.axios({
                url: api.POST_ADDEVALUATION,
                method: 'post',
                data: {
                    order_id: this.state.order_id,
                    taste_score: this.state.taste_score,
                    package_score: this.state.package_score,
                    account_score: this.state.account_score,
                    evaluate: this.state.evaluate,
                }
            }).then(data => {
                if (data.data.code === 200) {
                    this.props.history.push('/Home/Order')
                }
            })
        } else {
            // eslint-disable-next-line new-parens
            let formData = new FormData
            formData.append('file', this.state.files[0].file)
            formData.append('order_id', this.state.order_id)
            formData.append('taste_score', this.state.taste_score,)
            formData.append('package_score', this.state.package_score,)
            formData.append('account_score', this.state.account_score,)
            formData.append('evaluate', this.state.evaluate,)
            // console.log(formData.get('multipartFile'));
            this.axios({
                url: api.POST_ADDEVALUATION,
                method: 'post',
                data: formData
            }).then(data => {
                if (data.data.code === 200) {
                    this.props.history.push('/Home/Order')
                }
            })
        }

    }
    fanhui = () => {
        this.props.history.push('/Home/Order')
    }
    Textarea = (e) => {
        this.setState({
            evaluate: e
        })
    }
    // eslint-disable-next-line no-dupe-class-members
    componentDidMount() {
        let aa = this.props.match.params.orderId
        this.axios({
            url: api.GET_OLIFE,
            method: 'get',
            params: {
                user_id: 1,
                order_id: aa
            }
        }).then(data => {
            if (data.data.code === 200) {
                console.log(data);
                this.setState({
                    order_id: data.data.data[0].order_id,
                    shop_name: data.data.data[0].shop1.shop_name,
                    shop_photo_url: data.data.data[0].shop1.shop_photo_url
                })
            }
        })
    }
    render() {
        console.log(this.props.match.params.orderId);
        const { files } = this.state;
        return (
            <div className="flex-container">
                <Flex>
                    <Flex.Item>
                        <div className='title_icon'>
                            <i className="iconfont icon-jiantouarrowhead7" onClick={this.fanhui}></i>
                        </div>
                    </Flex.Item>
                    <Flex.Item>
                        <div className="sub-title">订单评价</div>
                    </Flex.Item>
                    <Flex.Item>
                        <div className='title_tight'>
                            <button className='title_but' onClick={this.tijiao}>提交</button>
                        </div>
                    </Flex.Item>
                </Flex>
                <div className='content_box'>
                    <div className='imgbox'>
                        <img src={titleImg} alt="" style={{ height: '100%' }} />
                    </div>
                    <div className='content_name'>
                        <p>{this.state.shop_name}</p>
                    </div>
                    <Flex align='center'>
                        <Flex.Item style={{ textAlign: 'center' }}>
                            <HCxx name={'口味'} fun={this.fu1}></HCxx>
                            <HCxx name={'包装'} fun={this.fu2} ></HCxx>
                            <HCxx name={'总体'} fun={this.fu3} style={{ margin: '5px 0' }}></HCxx>
                        </Flex.Item>
                    </Flex>
                    <Flex align='center'>
                        <Flex.Item style={{ textAlign: 'center' }}>
                            <List className='content_Textarea'>
                                <TextareaItem rows={5} count={40}
                                    onChange={this.Textarea}
                                    value={this.state.evaluate}
                                    className='content_Textarea_text' placeholder='请输入评价' />
                            </List>
                        </Flex.Item>
                    </Flex>
                    <Flex align='center' style={{ marginTop: '10px' }}>
                        <Flex.Item style={{ textAlign: 'center' }}>
                            <div className='content_photo'>
                                <WingBlank>
                                    <ImagePicker
                                        files={files}
                                        onChange={this.onChange}
                                        selectable={files.length < 1}
                                        length='1'
                                    />
                                </WingBlank>
                            </div>
                        </Flex.Item>
                    </Flex>

                </div>
            </div>
        );
    }
}

export default HCcustomerEvaluation;